import React from "react";
import { useNavigate,Outlet } from "react-router-dom";
import { Image, List } from 'antd-mobile'
import { VideoOutline } from 'antd-mobile-icons'
import '../../css/yyt/xiaoxi.css'
const Dian = () => {
  const navigate = useNavigate();
  const users = [
    {
      id: '1',
      avatar:
        'https://images.unsplash.com/photo-1548532928-b34e3be62fc6?ixlib=rb-1.2.1&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&ixid=eyJhcHBfaWQiOjE3Nzg0fQ',
      name: '王小小',
      description: '呼入电话',
      phone:11112
    },
    {
      id: '2',
      avatar:
        'https://images.unsplash.com/photo-1493666438817-866a91353ca9?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&s=b616b2c5b373a80ffc9636ba24f7a4a9',
      name: '李欣怡',
      description: '呼入电话',
      phone:11113
    },
    {
      id: '3',
      avatar:
        'https://images.unsplash.com/photo-1542624937-8d1e9f53c1b9?ixlib=rb-1.2.1&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&ixid=eyJhcHBfaWQiOjE3Nzg0fQ',
      name: '李四',
      description: '呼入电话',
      phone:11114
    },
    {
      id: '4',
      avatar:
        'https://images.unsplash.com/photo-1546967191-fdfb13ed6b1e?ixlib=rb-1.2.1&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&ixid=eyJhcHBfaWQiOjE3Nzg0fQ',
      name: '吴庆',
      description: '呼入电话',
      phone:11115
    }
  ]
  return (
    <div>
      <List>
            {users.map(user => (
              <List.Item
                key={user.name}
                prefix={
                  <Image
                    src={user.avatar}
                    style={{ borderRadius: 20 }}
                    fit='cover'
                    width={40}
                    height={40}
                  />
                }
                extra={
                  <VideoOutline onClick={()=>{navigate(`/tongxi?roomId=${user.phone}&name=${user.name}`)}} className="dh"/>
                }
                description={user.description}
              >
                {user.name}
              </List.Item>
            ))}
          </List>
    </div>
  );
};

export default Dian;